<template>
  <div class="flex flex-row items-stretch">
    <!-- 左侧边栏。 -->
    <aside class="w-40 md:w-60 lg:w-80 border-r bg-gray-100 relative">
      <!-- 搜索区域。 -->
      <div class="h-16 px-2 bg-white flex flex-row items-center absolute top-0 right-0 left-0">
        <div class="flex-1 flex items-center text-xs bg-gray-100 p-1 rounded">
          <i class="el-icon-search "></i>
          <input type="text" placeholder="搜索" class="w-full outline-0 bg-transparent ml-1">
        </div>
        <button type="button" class="bg-gray-100 ml-2 px-1 rounded cursor-pointer">
          <i class="el-icon-plus"></i>
        </button>
      </div>

      <!-- 会话列表。 -->
      <div class="absolute top-16 right-0 bottom-0 left-0">
        <el-scrollbar class="h-full">
          <router-link class="p-2 flex flex-row cursor-pointer hover:bg-gray-200 transition"
                       v-for="(item, index) in 20" v-bind:key="index"
                       v-bind:to="`/home/chat/info/${item}`">
            <div class="w-8 h-8 md:w-10 md:h-10 lg:w-12 lg:h-12 bg-blue-500 text-white rounded flex justify-center items-center">
              <i class="el-icon-picture"></i>
            </div>
            <div class="flex-1 flex flex-col justify-between ml-2">
              <div class="flex justify-between items-center">
                <h3 class="text-gray-900 text-sm lg:text-base line-clamp-1">相亲相爱一家人{{ item }}群</h3>
                <span class="text-xs lg:text-sm text-gray-400 whitespace-nowrap hidden md:inline-block">刚刚</span>
              </div>
              <p class="text-gray-500 text-xs line-clamp-1">[收到一条红包消息]</p>
            </div>
          </router-link>
        </el-scrollbar>
      </div>
    </aside>

    <div class="app-drag flex-1 bg-gray-50 flex flex-col">
      <header class="h-8 flex justify-end">
        <button type="button" class="app-no-drag text-sm px-2 py-1 cursor-pointer hover:bg-gray-100 transition" v-on:click="windowMinimize">
          <i class="el-icon-minus"></i>
        </button>
        <button type="button" class="app-no-drag text-sm px-2 py-1 cursor-pointer hover:bg-gray-100 transition" v-on:click="windowMaximize">
          <i class="el-icon-copy-document"></i>
        </button>
        <button type="button" class="app-no-drag text-sm px-2 py-1 cursor-pointer hover:bg-red-500 hover:text-white transition" v-on:click="windowClose">
          <i class="el-icon-close"></i>
        </button>
      </header>

      <router-view v-bind:key="Math.random()"></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: "home-chat-layout",
  methods: {}
};
</script>